<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
            <div ref="a"> {{ ct }} </div>
            <button @click="fn1"> ct+10  不使用 $nextTick </button>
            <button @click="fn2"> ct+10 使用  $nextTick </button>
            <button @click="fn3"> ct+10 使用  $nextTick as Promise </button>
    </div>

        
    
    <script>
       
       // watch 
        const app = new Vue({
            el:'#app',
            data:{
                ct:123
            },
            methods:{
                fn1(){
                    // 状态的修改是同步的  但是界面的渲染是异步的
                    // 界面的渲染是异步的，但是获取到的值是同步的，因为获取数据先于视图更新执行，所以当状态发生改变时，$ref获取的数据还是状态更改之前的数据，所以这就需要$nextTick对视图更新进行等待
                    this.ct = this.ct+10
                    console.log(this.ct)
                    console.log(" this.$refs.a.innerText", this.$refs.a.innerText )
                },
                fn2(){
                    // 状态的修改是同步的  但是界面的渲染是异步的
                    this.ct = this.ct+10
                    console.log(this.ct)

                    // 由于状态修改引起视图的更新是异步的
                    // 使用$nextTick 可以帮助我们  在状态修改且引起的视图更新完成之后再进行一些后续的操作
                    // 比如说，等视图渲染完成之后，再进行获取数据
                    this.$nextTick(()=>{
                        console.log(" $nextTick的 ", this.$refs.a.innerText )
                    })
                   
                },
               
                async fn3(){ // async...await 将该代码置于底层的事件轮询，于最后才执行 
                    this.ct = this.ct+10;
                    //  $nextTick如果没有传入值 那么返回就是一个promise
                    await this.$nextTick();
                    console.log( this.$refs.a.innerText )
                }
            }
        })




    </script>

</body>
</html>